<script>
  import sheep from '@/sheep';
  // #ifdef H5
  import wx from 'weixin-js-sdk';
  // #endif

  export default {
    name: 's-share-floating-window',
    data() {
      return {
        showShare: false,
      };
    },
    props: {
      index: {
        type: Number,
        default: 0,
      },
      top: {
        type: Number,
        default: 300,
      },
      isFamily: {
        type: Boolean,
        default: true,
      },
      mode: {
        type: String,
        default: 'right',
      },
    },
    computed: {
      SHARE_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      selectedFamilyDetail() {
        return;
      },
      family_id() {
        return;
      },
      userInfo() {
        return sheep.$store('user').userInfo;
      },
    },
    mounted() {
      // #ifndef MP
      uni.$on('showShare', (flag) => {
        this.showShare = flag;
      });
      // #endif
    },
    methods: {
      goShare() {
        if (this.index == 1) {
          return;
        }
        if (!!this.isFamily) {
          this.$emit('shareFriendsAndFamily');
        } else {
          this.$emit('shareFriendsAndFamily');
        }
      },
      async setShare() {
        // #ifndef MP
        uni.$emit('showShareGuide');
        // #endif
      },
    },
  };
</script>

<template>
  <view class="shareFloatingWindow" @click.stop="goShare" :class="mode" :style="{
    top:`${top}rpx`,
    display: showShare? 'none' : 'block'
  }">
    <!--    <image :src="`${SHARE_URL}/index/fenxiang_icon.png`"></image>-->
    <view class="description" :style="{
      color: index== 1 ?'#FFFFFF' : index == 2 ? '#FFFFFF' : '#FFFFFF'
    }">
      <view v-if="index == 1">
        分享给亲友
      </view>
      <view class="flex flex-column align-center" v-else-if="!!isFamily">
        <view class="fs_18" style="text-align: center;line-height: 24rpx">
          邀请亲人进入
        </view>
        <view class="fs_24" style="text-align: center">
          家庭
        </view>
      </view>
      <view class="flex flex-column align-center" v-else>
        <view class="fs_18" style="text-align: center;line-height: 24rpx">
          邀请亲人进入
        </view>
        <view class="fs_24" style="text-align: center">
          家谱
        </view>
      </view>
    </view>
    <button open-type="share" v-if="index == 1" id="shareButton" @click.stop="setShare"
            style="width: 100%;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);opacity: 0;"></button>
  </view>
</template>

<style scoped lang="scss">
  .shareFloatingWindow {
    position: fixed;
    top: 300rpx;
    padding: 16rpx 14rpx;
    //border-radius: 24rpx 24rpx 24rpx 24rpx;
    z-index: 10;
    background: url($uni-bg-url-sq + '/index/cebianlan_bg.png') no-repeat;
    background-size: 100% 100%;

    image {
      position: absolute;
      top: -35rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 44rpx;
      height: 45rpx;
    }

    .description {
      width: 28rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 28rpx;
      color: #FAE6BC;
      line-height: 30rpx;
    }
  }

  .left {
    right: -5rpx;
  }

  .right {
    right: 16rpx;
  }
</style>